<template>
  <div class="basicBox" v-if="data.active == 0">
    <div class="basicForm">
      <el-form label-width="120px" label-position="left">
        <el-form-item label="表单名称" placeholder="表单名称">
          <el-input
            v-model="
              data.processFormSaveDto.ProcessFormInfoSaveDto.ProcessFormName
            "
          />
        </el-form-item>
        <el-form-item label="表单编码" placeholder="表单编码">
          <el-input
            v-model="
              data.processFormSaveDto.ProcessFormInfoSaveDto.ProcessFormNo
            "
          />
        </el-form-item>
        <el-form-item label="表单类型" prop="region">
          <el-select
            placeholder="表单类型"
            v-model="
              data.processFormSaveDto.ProcessFormInfoSaveDto.ProcessFormType
            "
          >
            <el-option label="自定义表单" value="customer" />
            <el-option label="系统表单" value="system" />
          </el-select>
        </el-form-item>
        <!-- type="textarea" -->
        <el-form-item label="表单说明" placeholder="表单说明">
          <el-input
            autocomplete="off"
            type="textarea"
            rows="3"
            v-model="data.processFormSaveDto.ProcessFormInfoSaveDto.Remarks"
          />
        </el-form-item>
        <el-form-item label="数据连接" prop="region">
          <el-select>
            <el-option label="默认数据库" value="shanghai" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-main class="dataTable">
        <el-table
          :data="data.tableData"
          ref="singleTableRef"
          highlight-current-row
          style="width: 100%"
          empty-text="点击“新增”可选择1 条（单表）或 2 条以上（多表）"
        >
          <el-table-column label="序号" type="index" width="150" />
          <!-- <el-table-column label="类别" width="120" /> -->
          <el-table-column prop="tableName" label="表名" width="150" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" text size="small">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-actions">
          <el-button style="color: #1890ff" text @click="getTableInfos">
            新增一行
          </el-button>
        </div>
      </el-main>
    </div>
  </div>

  <div class="formDesign" v-else>
    <el-scrollbar class="left">
      <div class="components-list">
        <div class="components-part" v-for="item in data.components">
          <div class="components-title">{{ item.name }}</div>
          <div class="components-draggables">
            <draggable
              v-model="item.draggables"
              :group="{ name: data.groupName, pull: 'clone', put: false }"
              animation="1000"
              @start="onStart"
              @end="onEnd"
              itemKey="id"
            >
              <template #item="{ element }">
                <div
                  class="components-item"
                  :class="[drag == true ? 'down' : '']"
                  :name="element.name"
                  :type="element.type"
                  :formItemId="generateId()"
                  :id="element.id"
                >
                  <div class="components-body">
                    <svg-icon
                      :iconname="element.icon"
                      style="
                        width: 16px;
                        height: 16px;
                        margin-right: 5px;
                        color: black;
                      "
                    ></svg-icon>
                    {{ element.name }}
                  </div>
                </div>
              </template>
            </draggable>
          </div>
        </div>
      </div>
    </el-scrollbar>

    <div class="center">
      <div class="center-btns">
        <el-button link :icon="Edit" class="btnFocus">桌面端</el-button>
        <el-button link :icon="Iphone" class="btnFocus">移动端</el-button>
        <el-button link :icon="Search" class="btnFocus">预览</el-button>
        <el-button link :icon="Share" class="btnFocus">清空</el-button>
      </div>
      <div class="border"></div>
      <form-Center
        class="center-Design"
        :formId="data.processFormSaveDto.ProcessFormInfoSaveDto.Id"
        :dataTables="data.processFormSaveDto.ProcessFormInfoSaveDto.DataTables"
        :currentFormInfo="props.currentFormInfo"
      ></form-Center>
    </div>
    <div class="right">
      <formRight></formRight>
    </div>
  </div>
  <dialogTable
    ref="dialogTableRef"
    :title="data.dialog.title"
    :api="Api.getTableInfos"
  />
</template>
<script setup lang="ts">
import { Iphone, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
import { nextTick, reactive, ref } from 'vue';
import Api from '@/api/flow/processForm/index';
import dialogTable from '@/components/Dialog/Table/index.vue';
import formCenter from './formCenter.vue';
import mitt from '@/utils/bus';
import formRight from './formRight.vue';
//引入拖拽组件
import draggable from 'vuedraggable';
import { generateId } from '@/utils/util';
import { ElMessage } from 'element-plus';
import { capitalizeKeys } from '@/utils/util';
const bus: any = mitt;
const drag = ref(false);
const data = reactive({
  title: '',
  dialog: {
    title: '数据选择',
  },
  saveForm: {
    ProcessFormInfoSaveDto: {},
    FormPropSaveDto: {},
    CompStyleSaveDtos: [],
    CompPropSaveDtos: [],
  },
  groupName: 'people',
  iconName: 'icon-danhangshurukuang',
  form: {
    //表单名称
    processFormName: '',
    //表单编码
    processFormNo: '',
    //表单分类/类型
    processFormType: '',
    //说明
    remarks: '',
  },
  processFormSaveDto: {
    //表单基本信息
    ProcessFormInfoSaveDto: {
      Id: '',
      ProcessFormName: '',
      ProcessFormNo: '',
      ProcessFormType: '',
      State: '',
      Remarks: '',
      DataTables: '',
    },
    //表单属性信息
    FormPropSaveDto: {
      Id: '',
      FormSize: '',
      LabelAlign: '',
      LabelWidth: 0,
      PalletInterval: 0,
      FormStyle: '',
      FormWidth: '',
      FormCss: '',
      FormClass: '',
    },
    //组件样式信息
    CompStyleSaveDtos: [],
    //组件属性信息
    CompPropSaveDtos: [],
  },
  processForm: {
    processFormName: '',
    processFormNo: '',
    processFormType: '',
    remarks: '',
    dataTables: '',
  },
  components: [
    {
      name: '基础控件',
      draggables: [
        {
          name: '单行输入',
          icon: 'icon-danhangshurukuang',
          type: 'Input',
          id: '14D81DB6-3F07-3BE0-801A-41DD45E23730',
        },
        {
          name: '多行输入',
          icon: 'icon-duohangshurukuang',
          type: 'textArea',
          id: 'D2420FEE-B7AC-032F-D809-FF402B754149',
        },
        {
          name: '数字输入',
          icon: 'icon-shuzishurukuang',
          type: 'NumberInput',
          id: 'CFAB2969-EA8C-F748-48F6-826D54EA0976',
        },
        {
          name: '开关',
          icon: 'icon-kaiguan',
          type: 'Switch',
          id: 'E0B5D4BC-1E91-6D5A-F8F9-5BC0AAF40F6D',
        },
        {
          name: '单选框组',
          icon: 'icon-radio-checked',
          type: 'Radio',
          id: '559B7580-E1FB-83E8-D0F3-E6FBB1422CEE',
        },
        {
          name: '多选框组',
          icon: 'icon-duoxuanxuanzhong_o',
          type: 'Checked',
          id: 'E8F1DB86-C3F5-BEA7-AA82-5E8F7C6CDAB3',
        },
        {
          name: '下拉选择',
          icon: 'icon-pulldown',
          type: 'Down',
          id: '439B2795-E454-0AFB-1BD0-9AE42CA4B257',
        },
        {
          name: '级联选择',
          icon: 'icon-c092jilian',
          type: 'CascadeSelection',
          id: 'BED4252F-117F-7452-7126-2968F8738FD3',
        },
        {
          name: '日期选择',
          icon: 'icon-riqi',
          type: 'DateSelection',
          id: '0E4817C4-8876-EE1D-5433-982CBE62ACEE',
        },
        {
          name: '时间选择',
          icon: 'icon-date-1',
          type: 'TimeSelection',
          id: 'FB1F2788-5E15-59A4-EC34-E2DF26B32033',
        },
        {
          name: '文件上传',
          icon: 'icon-wenjianshangchuan',
          type: 'FileUpload',
          id: '4114829F-9BAC-A3D3-0466-D7040DD7E267',
        },
        {
          name: '图片上传',
          icon: 'icon-tupianshangchuan',
          type: 'ImageUpload',
          id: 'BA847D10-CADE-A832-897A-A8839D1A7DF1',
        },
        {
          name: '颜色选择',
          icon: 'icon-yanse',
          type: 'ColorUpload',
          id: 'E4F38A00-E746-5647-88BB-AC3A2AF43704',
        },
        {
          name: '评分',
          icon: 'icon-pingfenshezhi',
          type: 'Grade',
          id: 'EFBC513F-3EE9-7F3B-32AB-98E973EAEF24',
        },
        {
          name: '滑块',
          icon: 'icon-huakuai',
          type: 'Slider',
          id: '9D9E82A2-1E37-EA1D-E4A1-BC6321828020',
        },
        {
          name: '富文本',
          icon: 'icon-fuwenbenkuang',
          type: 'RichText',
          id: 'C3043660-34EE-BE25-B1C9-0370497B901F',
        },
        {
          name: '链接',
          icon: 'icon-lianjie',
          type: 'link',
          id: 'FFD97A53-1BA6-6351-36FE-69A0E803031D',
        },
        {
          name: '按钮',
          icon: 'icon-anniuzu',
          type: 'Button',
          id: 'DF60C110-5F08-5CFC-B3DB-F1791674B4DD',
        },
        {
          name: '文本',
          icon: 'icon-wenben',
          type: 'text',
          id: '780CD27A-CEB0-FE9A-D348-A155AB44647E',
        },
        {
          name: '提示',
          icon: 'icon-tishi',
          type: 'Tip',
          id: 'EDBC47C3-6D45-A320-51D8-64995D843C0E',
        },
        {
          name: '二维码',
          icon: 'icon-xiazai42',
          type: 'QrCode',
          id: '017A7120-079D-F417-D408-8617C0EE9076',
        },
        {
          name: '条形码',
          type: 'barCode',
          icon: 'icon-tiaoxingma',
          id: '05E41524-49FC-E246-B436-4DA013768FEF',
        },
      ],
    },
    {
      name: '高级控件',
      draggables: [
        { name: '组织选择', icon: 'icon-zuzhixuanze' },
        { name: '部门选择', icon: 'icon-bumenxuanze' },
        { name: '岗位选择', icon: 'icon-gangweiguanli' },
        { name: '用户选择', icon: 'icon-yonghuxuanze' },
        { name: '角色选择', icon: 'icon-jiaose' },
        { name: '分组选择', icon: 'icon-fenzu' },
        { name: '用户组件', icon: 'icon-yonghu' },
        { name: '设计子表', icon: 'icon-zhediemianban' },
        { name: '下拉树形', icon: 'icon-shuxingjiegou' },
        { name: '下拉表格', icon: 'icon-biaoge' },
        { name: '下拉补全', icon: 'icon-wenjianshangchuan' },
        { name: '省市区域', icon: 'icon-shengshiqu' },
        { name: '单据组件', icon: 'icon-danju' },
        { name: '关联表单', icon: 'icon-zhediemianban' },
        { name: '弹窗选择', icon: 'icon-danchuangxuanze' },
        { name: '关联表单属性', icon: 'icon-zhediemianban' },
        { name: '弹窗选择属性', icon: 'icon-danchuangxuanze' },
        { name: '计算公式', icon: 'icon-jisuangongshi' },
      ],
    },
    {
      name: '系统控件',
      draggables: [
        { name: '创建人员', icon: 'icon-chuangjianrenyuan' },
        { name: '创建时间', icon: 'icon-chuangjianshijian' },
        { name: '修改人员', icon: 'icon-edit-role' },
        { name: '修改时间', icon: 'icon-yonghuxuanze' },
        { name: '所属组织', icon: 'icon-zuzhixuanze' },
        { name: '所属岗位', icon: 'icon-gangweiguanli' },
      ],
    },
    {
      name: '布局控件',
      draggables: [
        { name: '分组标题', icon: 'icon-fenzu' },
        { name: '分割线', icon: 'icon-fengexian' },
        { name: '折叠面板', icon: 'icon-zhediemianban' },
        { name: '标签面板', icon: 'icon-biaoqian' },
        { name: '栈格容器', icon: 'icon-rongqi' },
        { name: '卡片容器', icon: 'icon-rongqi' },
        { name: '表格容器', icon: 'icon-biaoge' },
      ],
    },
  ],
  active: 0,
  tableData: [],
  labelPosition: 'left',
});

//开始拖拽事件
const onStart = () => {
  drag.value = true;
};
const props = defineProps({
  formInfo: {},
  currentFormInfo: {},
  //data.currentFormInfo
});
//拖拽结束事件
const onEnd = (currentData: any) => {
  drag.value = false;
  let name = currentData.item.attributes.name.value;
  let type = currentData.item.attributes.type.value;
  let id = currentData.item.attributes.id.value;
  let formItemId = currentData.item.attributes.formItemId.value;
  let fromData = {
    name,
    type,
    id,
    formItemId,
  };
  if (fromData.formItemId != null) {
    bus.emit('formDesignAddWidget', fromData);
  }
};

if ((props.currentFormInfo as any).compProps != null) {
  var list: any = [];
  (props.currentFormInfo as any).compProps.forEach((item: any) => {
    var info = capitalizeKeys(item);
    list.push(info);
  });
  (data.processFormSaveDto.CompPropSaveDtos as any) = list;
}
bus.on('formRightCompPropInfo', (currentInfo: any) => {
  if (data.processFormSaveDto.CompPropSaveDtos != null) {
    //FormItemId
    let isActive = data.processFormSaveDto.CompPropSaveDtos.filter(
      (s: any) => s.FormItemId == currentInfo.FormItemId
    );
    if (isActive.length > 0) {
      (data.processFormSaveDto.CompPropSaveDtos as any).push(currentInfo);
      let isAgain = data.processFormSaveDto.CompPropSaveDtos.filter(
        (s: any) => s.FormItemId == currentInfo.FormItemId
      );
      let isAddInfo = isAgain[isAgain.length - 1];
      let newArr = data.processFormSaveDto.CompPropSaveDtos.filter(
        (s: any) => s.FormItemId != currentInfo.FormItemId
      );
      newArr.push(isAddInfo);
      data.processFormSaveDto.CompPropSaveDtos = newArr;
    } else if (currentInfo.FormItemId != null) {
      (data.processFormSaveDto.CompPropSaveDtos as any).push(currentInfo);
    }
  }
});
bus.on('formSave', async (value: any) => {
  if (value == true) {
    var res = await Api.save.post(data.processFormSaveDto);
    if (res.code == 0) {
      ElMessage.success('保存成功');
    }
  }
});
const dialogTableRef = ref();
const getTableInfos = () => {
  nextTick(() => {
    dialogTableRef.value.open();
  });
};
if (props.formInfo != null) {
  (data.processFormSaveDto.ProcessFormInfoSaveDto as any) = props.formInfo;
  var dataTables = (props.formInfo as any).DataTables.split(',');

  dataTables.forEach((element: any) => {
    (data.tableData as any).push({ tableName: element });
  });
}
bus.on('selectedTable', (currentData: any) => {
  data.tableData = currentData;
  data.processFormSaveDto.ProcessFormInfoSaveDto.DataTables = currentData
    .map((s: any) => s.tableName)
    .join(',');
});
bus.on('active', (currentData: any) => {
  data.active = currentData;
});
</script>
<style lang="scss" scoped>
.formDesign {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 10px;
  background: #ebeef5;
  .left {
    flex: 1.2;
    border-radius: 5px;
    background-color: #ebeef5;
    margin-right: 10px;
    height: 100%;
    .components-list {
      height: 100%;
      .components-part {
        background: #ffffff;
        .components-draggables {
          margin-right: -10px;
          // box-sizing: inherit;
          //可拖拽子集
          .components-item {
            display: inline-block;
            width: 110px;
            margin: 0 10px 10px 0;
            -webkit-transition: -webkit-transform 0ms !important;
            transition: -webkit-transform 0ms !important;
            transition: transform 0ms !important;
            transition: transform 0ms, -webkit-transform 0ms !important;
            .components-body {
              padding-left: 8px;
              background: #f3f9ff;
              font-size: 12px;
              height: 36px;
              cursor: move;
              border: 1px dashed #f3f9ff;
              border-radius: 3px;
              color: #043254;
              line-height: 36px;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
            }
            .components-body:hover,
            .components-body:active {
              border: 1px dashed #409eff;
              color: #409eff;
            }
          }
        }
        .components-title {
          font-size: 14px;
          color: #043254;
          line-height: 30px;
          margin-bottom: 10px;
          font-weight: 700;
        }
        background: #fff;
        border-radius: 4px;
        padding: 10px 10px 0;
        margin-bottom: 10px;
        // background-color: aqua;
      }
    }
  }
  .center {
    border-radius: 5px;
    flex: 6;
    background-color: #ffffff;
    margin-right: 5px;
    position: relative;
    //中间按钮区
    .border {
      padding-top: 40px;
      width: 100%;
      border-bottom: 1px #dcdfe6 solid;
      // float: right;
      margin-bottom: 10px;
    }
    .center-btns {
      position: absolute;
      z-index: 1000;
      right: 10px;
      top: 10px;
      .btnFocus:focus {
        color: #409eff;
      }
    }
    //border center-btns
    .center-Design {
      width: 100%;
      padding-left: 5px;
      padding-right: 5px;
      align-items: center;
      .down {
        border-top: #409eff solid 3px;
      }
    }
  }
  .right {
    border-radius: 5px;
    flex: 1.5;
    position: relative;
    background-color: #ffffff;
    overflow: auto;
  }
}
.basicBox {
  background-color: #ebeef5;
  height: 100%;
  -webkit-box-align: center;
  width: 100%;
  overflow: hidden;
  padding: 20px 0px;
  .basicForm {
    padding: 20px;
    // position: absolute;
    // margin-left: -100px;
    // left: 30%;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 4px;
    height: 99.9%;
    overflow: auto;
    width: 50%;
    overflow-x: hidden;
    box-sizing: border-box;
    .dataTable {
      padding: 10px;
      .table-actions {
        margin-top: 10px;
        border: 1px dashed #ebeef5;
        text-align: center;
      }
    }
  }
}
</style>
